<template>
	<view class="miaosha">
	<!-- 	<view class="hbox">
			<view class="item" :class="{ active: i == 0 }" v-for="(item, i) in 10" :key="i">
				<text>08 : 00</text>
				<text>抢购中</text>
			</view>
		</view> -->
		<view class="container">
			<view class="card-1">
				<view class="lbox">
					<image src="@/static/images/mstime.png" mode="aspectFit"></image>
					<text>抢购中</text>
				</view>
				<view class="rbox">
					<text>距离结束：</text>
					<djs @finish="finish" :time="djs" bgColor="#e54e4e"></djs>
				</view>
			</view>

			<view style="margin-top: 16rpx">
				<mslist :list="list"></mslist>
				<u-loadmore :status="status" />
			</view>
		</view>
	</view>
</template>

<script>
import API from '@/common/api';
export default {
	name: 'miaosha',
	computed: {
		djs() {
			if (this.list.length > 0) {
				return this.list[0].cuxiao_time * 1000;
			} else {
				return 0;
			}
		}
	},
	data() {
		return {
			status: '',
			list: [],
			paging: {
				page: 1,
				pagenum: 40
			}
		};
	},
	onLoad() {},
	onShow() {
		this.reset();
		this.init();
	},
	onReachBottom() {
		if (this.status === 'nomore') return;
		this.init();
	},
	methods: {
		finish() {
			this.reset();
			this.init();
		},
		reset() {
			this.list = [];
			this.paging.page = 1;
		},
		init() {
			// 爆款秒杀
			this.status = 'loading';
			API.getJson('product_plist', { if_miaosha: 1, ...this.paging }).then((res) => {
				const { code, data, message } = res;
				if (code === 1) {
					if (data.length !== 0) this.list = this.list.concat(data);
					if (this.paging.pagenum === data.length) {
						this.paging.page += 1;
						this.status = 'loadmore';
					} else {
						this.status = 'nomore';
					}
				}
			});
		}
	}
};
</script>

<style lang="less" scoped>
.miaosha {
	.container {
		padding: 16rpx 32rpx;
		.card-1 {
			.flex-between();
			height: 88rpx;
			padding: 0 26rpx;
			background: #ffffff;
			.lbox {
				display: flex;
				align-items: center;
				image {
					width: 27rpx;
					height: 27rpx;
					margin-right: 24rpx;
				}
				text {
					font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #e54e4e;
				}
			}
			.rbox {
				display: flex;
				align-items: center;
				& > text {
					font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #000000;
				}
			}
		}
	}
	.hbox {
		display: flex;
		overflow: auto hidden;
		.item {
			.flex-center-y();
			width: 150rpx;
			height: 150rpx;
			// background: #E54E4E;
			background: #ffffff;
			flex-shrink: 0;
			text:nth-of-type(1) {
				font-size: 28rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #000000;
			}
			text:nth-of-type(2) {
				margin-top: 4rpx;
				font-size: 24rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #000000;
			}
		}
		.active {
			background: #e54e4e !important;
			text {
				color: #ffffff !important;
			}
		}
	}
}
</style>